<!--
 * @Author: dzj
 * @Date: 2021-12-11 23:40:51
 * @Description: 高级检索
-->
<template>
  <div class="all">
    <el-select v-if="display" v-model="opt" placeholder="" @change="compute_change">
      <el-option
            v-for="item in opts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
      </el-option>
    </el-select>
    <el-input
      v-model="input"
      placeholder="Please input"
      class="input-with-select"
      style="width:80%;margin-left:5%"
      
      @change="input_change"
      @keyup.enter="gosearch"
    >
      <template #prepend>
        <el-select v-model="value" placeholder="请选择 " style="width: 110px" @change="type_change">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </el-input>
     <!-- <el-button type="text" style="margin-left:3%" @click="del(index)">删除</el-button> -->
  </div>
</template>
<script>
export default {
  props:["display","index"],
  data() {
    return {
      options: [
        {
          value: "",
          label: "主题",
        },
        {
          value: "key",
          label: "关键词",
        },

        {
          value: "author",
          label: "作者",
        },
      ],
      opts: [
        {
          value: "and",
          label: "And",
        },
        {
          value: "or",
          label: "Or",
        },

        {
          value: "not",
          label: "Not",
        },
      ],
      value: "",

      input: "",
      opt:"and",

      result:{opt:"and",value:"",input:""}
    };
  },
  methods:{
    gosearch(){
      this.$emit('fatherMethod');
    },
    compute_change(val){
      console.log(11111111111)
      this.result.opt=val
      // console.log(this.result)
    },
    type_change(val){
      this.result.value=val
    },
    input_change(val){
      this.result.input=val
      console.log(11111111111)
    },
    del(n){
        console.log(n)
        this.$emit('remove',n);
    }
  },
  created(){
  }
};
</script>
<style>
.all {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.all .el-select .el-input__inner {
    cursor: pointer;
    display: inline-flex;
    width: 100px;
}
</style>
